<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import card_back from '@/assets/card-back.png';
import ArrowRightYellow from '~icons/app/icon-arrow-yellow.svg';
const { t } = useI18n();
const ecosystem = computed(() => {
  return {
    look_detail: t('home.ecosystem.look_detail'),
    cards: [
      {
        title: 'ModelZoo',
        description: t('home.ecosystem.card_desc_1'),
      },
      {
        title: 'MindInsight',
        description: t('home.ecosystem.card_desc_2'),
      },
      {
        title: 'MindArmour',
        description: t('home.ecosystem.card_desc_3'),
      },
      {
        title: 'MindSpore Serving',
        description: t('home.ecosystem.card_desc_4'),
      },
      {
        title: 'MindSpore Lite',
        description: t('home.ecosystem.card_desc_5'),
      },
      {
        title: 'MindSpore Federated',
        description: t('home.ecosystem.card_desc_6'),
      },
      {
        title: 'MindScience',
        description: t('home.ecosystem.card_desc_7'),
      },
      {
        title: 'MindSpore Probability',
        description: t('home.ecosystem.card_desc_8'),
      },
      {
        title: 'MindQuantum',
        description: t('home.ecosystem.card_desc_9'),
      },
    ],
  };
});
</script>
<template>
  <ul class="ecosystem-list">
    <li v-for="item in ecosystem.cards" class="ecosystem-list-item shadow"
      :style="{ backgroundImage: 'url(' + card_back + ')' }">
        <h3 class="title">{{ item.title }}</h3>
        <p class="description">{{ item.description }}</p>
        <o-button type="text" placement="right" class="btn">
          {{ ecosystem.look_detail }}
          <template #right
            ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
          ></template>
        </o-button>
    </li>
  </ul>
</template>
<style scoped lang="scss">
.ecosystem-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px;
  column-gap: 10px;
  border-bottom: 1px solid rgba(var(--theme-white-rgb), 0.2);
  padding-bottom: 40px;
  justify-content: center;
  &-item {
    padding-left: 24px;
    position: relative;
    list-style: none;
    text-align: start;
      .title {
        padding-top:40px;
        font-size: 18px;
        line-height: 24px;
      }
      .description {
        padding-top: 10px;
        font-weight: normal;
        color: var(--theme-text);
        line-height: 22px;
        font-size: 14px;
      }
      .btn{
        margin-bottom: 20px;
      }
  }
}

@media (max-width: 1100px) {
  .home-partners {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    &-item {
      padding: 0 20px;
    }
  }
}
</style>
